<Modal v-model="modal" :class="modalClasses" :width="tool?style.widthWithDev:style.width" :mask="false" footer-hide
    draggable @on-visible-change="onVisibleChange" ref="Modal">
    <template #header>
        <p>
            <Space>
                <span>{{$t(title)+':'+id}}</span>
                <tooltip :content="$t('设为封面')" :delay="500" placement="top">
                    <i-button size="small" icon="ios-image" style="height:18px;font-size:12px;margin-bottom:4px;"
                        @click="saveAsThumbnail">
                    </i-button>
                </tooltip>
                <tooltip :content="$t('全屏')" :delay="500" placement="top">
                    <i-button size="small" icon="ios-expand" style="height:18px;font-size:12px;margin-bottom:4px;"
                        @click="requestFullScreen">
                    </i-button>
                </tooltip>
                <tooltip :content="$t('扩展组件')" :delay="500" placement="top" v-if="components.length>0">
                    <i-button size="small" icon="ios-calculator" style="height:18px;font-size:12px;margin-bottom:4px;"
                        @click="tool=tool==='component'?null:'component';lastMsg=null">
                    </i-button>
                </tooltip>
                <tooltip :content="$t('开发者工具')" :delay="500" placement="top">
                    <i-button size="small" icon="ios-hammer" style="height:18px;font-size:12px;margin-bottom:4px;"
                        @click="tool=tool==='devTool'?null:'devTool';lastMsg=null">
                        <Badge v-if="lastMsg && lastMsg" :status="lastMsg.stype">
                        </Badge>
                    </i-button>
                </tooltip>
                <!-- <tooltip :content="$t('检视')" :delay="500" placement="top">
                <i-button size="small" style="height:18px;font-size:12px;margin-bottom:4px;"
                    @click="tool=tool==='Inspector'?null:'Inspector'">
                    <Icon type="ios-eye" />
                </i-button>
            </tooltip> -->
            </Space>
        </p>
    </template>

    <div style="display: flex;flex-direction: row;">
        <div class="jspv_wrap" :style="style">
            <iframe ref="iframe" class="jsprevieweriframe" :style="iframeStyle" scrolling="no" :src="url" />
            <div class="jspv_wrap_mask" :style="maskStyle" @click="onClickIframeMask"></div>
        </div>
        <Tabs type="card" v-show="tool==='component' && components.length>0">
            <TabPane v-for="comp in components" :label="$t(comp.name)">
                <component :is="comp.component" :props="comp.props" :scene="scene" :iframe="$refs.iframe">
                </component>
            </TabPane>
        </Tabs>
        <div v-show="tool==='devTool'" style="overflow:auto;border:0;padding:10px;margin:0;vertical-align:top;">
            <div style="width:500px;height:100%">
                <select name="screen" class="screen-select" ref="jsprevieweriframe_screen"
                    @change="changeScreen($event)">
                    <option value="666px">1333 9:16</option>
                    <option value="640px">1280</option>
                    <option selected value="600px">1200 10:16</option>
                    <option value="500px">1000 4:3</option>
                    <option value="375px">750 1:1</option>
                    <option value="281px">562 3:4</option>
                    <option value="234px">468 16:10</option>
                    <option value="210px">421 16:9</option>
                </select>
                <!-- <tooltip :content="$t('暂停')" :delay="500" placement="top">
                    <i-button size="small" @click="pause">
                        <Icon type="ios-pause" />
                    </i-button>
                </tooltip> -->
                <tooltip :content="$t('重启')" :delay="500" placement="top">
                    <i-button size="small" @click="restart">
                        <Icon type="ios-refresh" />
                    </i-button>
                </tooltip>
                {{$t("Grid")}}
                <i-input number @on-change="gridChange" size="small" style="width:40px" v-model="gridX" />
                :
                <i-input number @on-change="gridChange" size="small" style="width:40px" v-model="gridY" />
                <span style="display:inline-block;width:30px">{{mousePosition.x}}</span>
                ,
                <span style="display:inline-block;width:30px">{{mousePosition.y}}</span>
                <br />
                <Log-View ref="logview" :levelChangeCallback="onLogLevelChange" :scene="scene" :isDebug="isDebug" :sendMessage="sendMessage" style="height:550px;overflow: auto;"></Log-View>
            </div>
        </div>
    </div>
</Modal>